<div class="page-header">
    <h1 class="page-title">Welcome to MSAL Express Sample</h1>
    <p class="page-subtitle">Single-Page Application with server-side authentication</p>
</div>

<!-- Content for authenticated users -->
<div data-auth-required style="display: none;">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Welcome back!</h2>
            <p class="card-description">You are successfully signed in</p>
        </div>

        <p>Hello <strong data-user-name></strong>! You are now authenticated and can access protected resources.</p>

        <div class="btn-group">
            <a href="/profile" id="viewProfileButton" class="btn spa-link">View Your Profile</a>
        </div>
    </div>
</div>

<!-- Content for unauthenticated users -->
<div data-unauth-required>
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Authentication Demo</h2>
            <p class="card-description">Sign in to access your Microsoft 365 profile</p>
        </div>

        <p>This sample demonstrates how to use MSAL.js with Express.js in a Single-Page Application architecture.</p>

        <h3>Features:</h3>
        <ul>
            <li>🔐 Azure AD Authentication (Popup & Redirect flows)</li>
            <li>👤 Account Management & Switching</li>
            <li>📊 Microsoft Graph API Integration</li>
            <li>🔄 SPA-style Navigation</li>
            <li>📱 Responsive Design</li>
        </ul>

        <p><strong>Click the "Login" button above to get started!</strong></p>
    </div>
</div>